
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Protable - Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>

    <!-- Plugin styles -->
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">

    <!-- quill -->
    <link href="vendors/quill/quill.snow.css" rel="stylesheet" type="text/css">

    <!-- Clockpicker -->
    <link rel="stylesheet" href="vendors/clockpicker/bootstrap-clockpicker.min.css" type="text/css">

    <!-- Datepicker -->
    <link rel="stylesheet" href="vendors/datepicker/daterangepicker.css" type="text/css">

    <!-- Select2 -->
    <link rel="stylesheet" href="vendors/select2/css/select2.min.css" type="text/css">

    <!-- App styles -->
    <link rel="stylesheet" href="assets/css/app.min.css" type="text/css">
</head>
<body class="stretch-layout sticky-navigation">

<!-- begin::preloader-->
<div class="preloader">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px" viewBox="0 0 128 128"
         xml:space="preserve">
        <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
        <g>
            <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
                  fill="#000000" fill-opacity="1"/>
            <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64"
                              dur="500ms" repeatCount="indefinite">
            </animateTransform>
        </g>
    </svg>
</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div class="navigation">

    <!-- begin::logo -->
    <div id="logo">
        <a href="index.html">
            <img class="logo" src="assets/media/image/logo.png" alt="logo">
            <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
            <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
        </a>
    </div>
    <!-- end::logo -->

    <!-- begin::navigation header -->
    <header class="navigation-header">
        <figure class="avatar avatar-state-success">
            <img src="assets/media/image/user/man_avatar3.jpg" class="rounded-circle" alt="image">
        </figure>
        <div>
            <h5>Nikos Pedlow</h5>
            <p class="text-muted">Administrator</p>
            <ul class="nav">
                <li class="nav-item">
                    <a href="profile.html" class="btn nav-link bg-info-bright" title="Profile" data-toggle="tooltip">
                        <i data-feather="user"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="btn nav-link bg-success-bright" title="Settings" data-toggle="tooltip">
                        <i data-feather="settings"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="login.html" class="btn nav-link bg-danger-bright" title="Logout" data-toggle="tooltip">
                        <i data-feather="log-out"></i>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <!-- end::navigation header -->

    <!-- begin::navigation menu -->
    <div class="navigation-menu-body">
        <ul>
            <li class="navigation-divider">Main</li>
            <li>
                <a href="index.html">
                    <i class="nav-link-icon" data-feather="bar-chart-2"></i>
                    <span>Dashboard</span>
                </a>
                <ul>
                    <li><a href="index.html">Dashboard 1</a></li>
                    <li><a href="dashboard-two.html">Dashboard 2</a></li>
                </ul>
            </li>
            <li>
                <a href="chat.html">
                    <i class="nav-link-icon" data-feather="message-circle"></i>
                    <span>Chat</span>
                    <span class="badge badge-danger">2</span>
                </a>
            </li>
            <li>
                <a href="inbox.html">
                    <i class="nav-link-icon" data-feather="mail"></i>
                    <span>Mail</span>
                    <span class="badge badge-success">2</span>
                </a>
            </li>
            <li>
                <a href="app-todo.html" class="active">
                    <i class="nav-link-icon" data-feather="check-circle"></i>
                    <span>Todo</span>
                    <span class="badge badge-warning">2</span>
                </a>
            </li>
            <li>
                <a href="file-manager.html">
                    <i class="nav-link-icon" data-feather="file"></i>
                    <span>File Manager</span>
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="nav-link-icon" data-feather="calendar"></i>
                    <span>Calendar</span>
                </a>
            </li>
            <li class="navigation-divider">UI Elements</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="monitor"></i>
                    <span>Components</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Basic</a>
                        <ul>
                            <li><a href="alerts.html">Alert</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="list-group.html">List Group</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="media-object.html">Media Object</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="spinners.html">Spinners</a></li>
                            <li><a href="navs.html">Navs</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="popovers.html">Popovers</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Cards</a>
                        <ul>
                            <li><a href="basic-cards.html">Basic Cards </a></li>
                            <li><a href="image-cards.html">Image Cards </a></li>
                            <li><a href="card-scroll.html">Card Scroll </a></li>
                            <li><a href="other-cards.html">Others </a></li>
                        </ul>
                    </li>
                    <li><a href="avatar.html">Avatar</a></li>
                    <li><a href="icons.html">Icons</a></li>
                    <li><a href="colors.html">Colors</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="globe"></i>
                    <span>Plugins</span>
                </a>
                <ul>
                    <li><a href="sweet-alert.html">Sweet Alert</a></li>
                    <li><a href="lightbox.html">Lightbox</a></li>
                    <li><a href="toast.html">Toast</a></li>
                    <li><a href="tour.html">Tour</a></li>
                    <li><a href="slick-slide.html">Slick Slide</a></li>
                    <li><a href="nestable.html">Nestable</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="mouse-pointer"></i>
                    <span>Forms</span>
                </a>
                <ul>
                    <li><a href="basic-form.html">Form Layouts</a></li>
                    <li><a href="custom-form.html">Custom Forms</a></li>
                    <li><a href="advanced-form.html">Advanced Form</a></li>
                    <li><a href="form-validation.html">Validation</a></li>
                    <li><a href="form-wizard.html">Wizard</a></li>
                    <li><a href="file-upload.html">File Upload</a></li>
                    <li><a href="datepicker.html">Datepicker</a></li>
                    <li><a href="timepicker.html">Timepicker</a></li>
                    <li><a href="colorpicker.html">Colorpicker</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="grid"></i>
                    <span>Tables</span>
                </a>
                <ul>
                    <li><a href="tables.html">Basic Tables</a></li>
                    <li><a href="data-table.html">Datatable</a></li>
                    <li><a href="responsive-table.html">Responsive Tables</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="pie-chart"></i>
                    <span>Charts</span>
                </a>
                <ul>
                    <li><a href="apexchart.html">Apex</a></li>
                    <li><a href="chartjs.html">Chartjs</a></li>
                    <li><a href="justgage.html">Justgage</a></li>
                    <li><a href="morsis.html">Morsis</a></li>
                    <li><a href="peity.html">Peity</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="map-pin"></i>
                    <span>Maps</span>
                </a>
                <ul>
                    <li><a href="google-map.html">Google</a></li>
                    <li><a href="vector-map.html">Vector</a></li>
                </ul>
            </li>
            <li class="navigation-divider">Extras</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="user"></i>
                    <span>Authentication</span>
                </a>
                <ul>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="register.html">Register</a></li>
                    <li><a href="recover-password.html">Recovery Password</a></li>
                    <li><a href="lock-screen.html">Lock Screen</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="copy"></i>
                    <span>Pages</span>
                </a>
                <ul>
                    <li><a href="profile.html">Profile</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                    <li><a href="invoice.html">Invoice</a></li>

                    <li><a href="pricing-table.html">Pricing Table</a></li>
                    <li><a href="search-result.html">Search Result</a></li>
                    <li>
                        <a href="#">Error Pages</a>
                        <ul>
                            <li><a href="404.html">404</a></li>
                            <li><a href="404-2.html">404 V2</a></li>
                            <li><a href="503.html">503</a></li>
                            <li><a href="mean-at-work.html">Mean at Work</a></li>
                        </ul>
                    </li>
                    <li><a href="blank-page.html">Starter Page</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="send"></i>
                    <span>Email Templates</span>
                </a>
                <ul>
                    <li><a href="email-template-basic.html">Basic</a></li>
                    <li><a href="email-template-alert.html">Alert</a></li>
                    <li><a href="email-template-billing.html">Billing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="menu"></i>
                    <span>Menu Level</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Menu Level</a>
                        <ul>
                            <li>
                                <a href="#">Menu Level </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end::navigation menu -->

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

    <!-- begin::header -->
    <div class="header">

        <!-- begin::header left -->
        <ul class="navbar-nav">

            <!-- begin::navigation-toggler -->
            <li class="nav-item navigation-toggler">
                <a href="#" class="nav-link">
                    <i data-feather="menu"></i>
                </a>
            </li>
            <!-- end::navigation-toggler -->

            <!-- begin::header-logo -->
            <li class="nav-item" id="header-logo">
                <a href="index.html">
                    <img class="logo" src="assets/media/image/logo.png" alt="logo">
                    <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
                    <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
                </a>
            </li>
            <!-- end::header-logo -->
        </ul>
        <!-- end::header left -->

        <!-- begin::header-right -->
        <div class="header-right">
            <ul class="navbar-nav">

                <!-- begin::search-form -->
                <li class="nav-item search-form">
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <div class="input-group-append">
                                        <button class="btn btn-default" type="button">
                                            <i data-feather="search"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <!-- end::search-form -->

                <!-- begin::header minimize/maximize -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Fullscreen" data-toggle="fullscreen">
                        <i class="maximize" data-feather="maximize"></i>
                        <i class="minimize" data-feather="minimize"></i>
                    </a>
                </li>
                <!-- end::header minimize/maximize -->

                <!-- begin::header app list -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Apps" data-toggle="dropdown">
                        <i data-feather="grid"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-3">
                            <h6 class="text-uppercase font-size-11 mb-3">Web Apps</h6>
                            <div class="row row-xs">
                                <div class="col-6">
                                    <a href="chat.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-success width-23 height-23" data-feather="message-circle"></i>
                                            <div class="mt-2">Chat</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="inbox.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-info width-23 height-23" data-feather="mail"></i>
                                            <div class="mt-2">Mail</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="calendar.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-warning width-23 height-23" data-feather="calendar"></i>
                                            <div class="mt-2">Calendar</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="file-manager.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-danger width-23 height-23" data-feather="file"></i>
                                            <div class="mt-2">File Manager</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- end::header app list -->

                <!-- begin::header messages dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Messages" data-toggle="dropdown">
                        <i data-feather="message-circle"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Messages</h6>
                            <small class="font-size-11 opacity-7">2 unread messages</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Herbie Pallatina
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">02:30 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar5.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Andrei Miners
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">08:36 PM</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old chats</span>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Kevin added
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">11:09 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar2.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Eugenio Carnelley
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Neely Ferdinand
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header messages dropdown -->

                <!-- begin::header notification dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Notifications" data-toggle="dropdown">
                        <i data-feather="bell"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Notifications</h6>
                            <small class="font-size-11 opacity-7">1 unread notifications</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-success-bright text-success rounded-circle">
                                                    <i class="ti-user"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New customer registered
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">20 min ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old notifications</span>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-warning-bright text-warning rounded-circle">
                                                    <i class="ti-package"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New Order Recieved
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">45 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-danger-bright text-danger rounded-circle">
                                                    <i class="ti-server"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Server Limit Reached!
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">55 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-info-bright text-info rounded-circle">
                                                    <i class="ti-layers"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Apps are ready for update
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">Yesterday</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header notification dropdown -->
            </ul>

            <!-- begin::mobile header toggler -->
            <ul class="navbar-nav d-flex align-items-center">
                <li class="nav-item header-toggler">
                    <a href="#" class="nav-link">
                        <i data-feather="arrow-down"></i>
                    </a>
                </li>
            </ul>
            <!-- end::mobile header toggler -->
        </div>
        <!-- end::header-right -->
    </div>
    <!-- end::header -->

    <!-- begin::main-content -->
    <main class="main-content">

        <div class="row app-block">
            <div class="col-md-3 app-sidebar">
                <div class="card">
                    <div class="card-body">
                        <button class="btn btn-primary btn-block" data-toggle="modal" data-target="#newTaskModal">
                            <i data-feather="plus" class="mr-2"></i>
                            New Task
                        </button>
                    </div>
                    <div class="app-sidebar-menu">
                        <div class="list-group list-group-flush">
                            <a href="#" class="list-group-item active d-flex align-items-center">
                                <i data-feather="mail" class="mr-2 width-15 height-15"></i>
                                All
                            </a>
                            <a href="#" class="list-group-item">
                                <i data-feather="send" class="mr-2 width-15 height-15"></i>
                                My Task
                            </a>
                        </div>
                        <div class="card-body">
                            <h6 class="mb-0">Tags</h6>
                        </div>
                        <div class="list-group list-group-flush">
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-warning fa fa-circle mr-2"></span>
                                Theme Support
                                <span class="small ml-auto">5</span>
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-success fa fa-circle mr-2"></span>
                                Freelance
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-danger fa fa-circle mr-2"></span>
                                Social
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-info fa fa-circle mr-2"></span>
                                Friends
                            </a>
                            <a href="#" class="list-group-item d-flex align-items-center">
                                <span class="text-secondary fa fa-circle mr-2"></span>
                                Coding
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9 app-content">
                <div class="app-content-overlay"></div>
                <div class="app-action">
                    <div class="action-left">
                        <ul class="list-inline">
                            <li class="list-inline-item mb-0">
                                <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                    Filter
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Favourites</a>
                                    <a class="dropdown-item" href="#">Done</a>
                                    <a class="dropdown-item" href="#">Deleted</a>
                                </div>
                            </li>
                            <li class="list-inline-item mb-0">
                                <a href="#" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
                                    Sort
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Ascending</a>
                                    <a class="dropdown-item" href="#">Descending</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="action-right">
                        <form class="d-flex mr-3">
                            <a href="#" class="app-sidebar-menu-button btn btn-outline-light">
                                <i data-feather="menu" class="width-15 height-15"></i>
                            </a>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Task search"
                                       aria-describedby="button-addon1">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-light" type="button" id="button-addon1">
                                        <i class="ti-search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <div class="app-pager d-flex align-items-center">
                            <div class="mr-3">1-50 of 253</div>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Previous">
                                            <i data-feather="chevron-left" class="width-15 height-15"></i>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Next">
                                            <i data-feather="chevron-right" class="width-15 height-15"></i>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="card card-body app-content-body">
                    <div class="app-lists">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item task-list active">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
                                        <label class="custom-control-label" for="customCheck1"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">How To Protect Your Computer Very Useful Tips
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-danger">Social</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Jo Hugill" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Cullie Philcott" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list active">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck2" checked>
                                        <label class="custom-control-label" for="customCheck2"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star font-size-16 text-warning"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">How Hypnosis Can Help You
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-warning">Theme Support</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Jo Hugill" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Cullie Philcott" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck3">
                                        <label class="custom-control-label" for="customCheck3"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star font-size-16 text-warning"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Dealing With Technical Support 10 Useful Tips
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-info">Friends</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                        <span class="avatar-title bg-primary rounded-circle">P</span>
                                                    </div>
                                                    <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                        <span class="avatar-title bg-success rounded-circle">G</span>
                                                    </div>
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Jo Hugill" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Cullie Philcott" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list active">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck4" checked>
                                        <label class="custom-control-label" for="customCheck4"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Get The Boot A Birds Eye Look Into Mcse Boot Camps
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-warning">Social</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                        <span class="avatar-title bg-success rounded-circle">G</span>
                                                    </div>
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck5">
                                        <label class="custom-control-label" for="customCheck5"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Buying Used Electronic Test Equipment.
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-success">Freelance</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                        <span class="avatar-title bg-primary rounded-circle">P</span>
                                                    </div>
                                                    <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                        <span class="avatar-title bg-success rounded-circle">G</span>
                                                    </div>
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck6">
                                        <label class="custom-control-label" for="customCheck6"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Fix Responsiveness
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-warning">Theme Support</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                        <span class="avatar-title bg-warning rounded-circle">G</span>
                                                    </div>
                                                    <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                        <span class="avatar-title bg-info rounded-circle">P</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck7">
                                        <label class="custom-control-label" for="customCheck7"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star font-size-16 text-warning"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">
                                            Hypnotherapy For Motivation Getting The Drive Back
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-secondary">Coding</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck8">
                                        <label class="custom-control-label" for="customCheck8"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Are You Struggling In Life
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-warning">Theme Support</div>
                                            </div>
                                            <div class="mr-3">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                        <span class="avatar-title bg-primary rounded-circle">P</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck9">
                                        <label class="custom-control-label" for="customCheck9"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Believing Is The Absence Of Doubt
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-success">Freelance</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck10">
                                        <label class="custom-control-label" for="customCheck10"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Success Steps For Your Personal Or Business Life
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-danger">Social</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                        <span class="avatar-title bg-primary rounded-circle">P</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck11">
                                        <label class="custom-control-label" for="customCheck11"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">Don't Let The Outtakes Take You Out
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-warning">Theme Support</div>
                                            </div>
                                            <div class="mr-3">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                        <span class="avatar-title bg-success rounded-circle">G</span>
                                                    </div>
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item task-list">
                                <div class="mr-3">
                                    <a href="#" class="app-sortable-handle">
                                        <i data-feather="move" class="width-15 height-15"></i>
                                    </a>
                                </div>
                                <div>
                                    <div class="custom-control custom-checkbox custom-checkbox-success mr-2">
                                        <input type="checkbox" class="custom-control-input" id="customCheck12">
                                        <label class="custom-control-label" for="customCheck12"></label>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" class="add-star mr-3" title="Add stars">
                                        <i class="fa fa-star-o font-size-16"></i>
                                    </a>
                                </div>
                                <div class="flex-grow-1 min-width-0">
                                    <div class="mb-1 d-flex align-items-center justify-content-between">
                                        <div class="app-list-title text-truncate">It is a good idea to think of your PC as an office.
                                        </div>
                                        <div class="pl-3 d-flex align-items-center">
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="badge badge-warning">Theme Support</div>
                                            </div>
                                            <div class="mr-3 d-sm-inline d-none">
                                                <div class="avatar-group">
                                                    <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                        <span class="avatar-title bg-success rounded-circle">G</span>
                                                    </div>
                                                    <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                        <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                             alt="image">
                                                    </figure>
                                                    <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                        <span class="avatar-title bg-primary rounded-circle">P</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="#" title="Delete" data-toggle="tooltip">
                                                <i data-feather="trash-2" class="width-15 height-15"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- end::app-lists -->

                    <!-- begin:app-detail -->
                    <div class="card app-detail">
                        <div class="card-header">
                            <div class="app-detail-action-left">
                                <a class="app-detail-close-button" href="#">
                                    <i data-feather="arrow-left" class="mr-3"></i>
                                </a>
                                <h5 class="mb-0">Draw design and presentation for customers. </h5>
                            </div>
                            <div class="app-detail-action-right">
                                <div>
                                    <a href="#" class="btn btn-success" data-toggle="tooltip"
                                       title="2:44 AM">
                                        <i data-feather="check" class="mr-2"></i>
                                        Completed
                                    </a>
                                    <span data-toggle="modal" data-target="#editTaskModal">
                                        <a href="#" class="btn btn-outline-light ml-2" title="Edit Task"
                                           data-toggle="tooltip">
                                            <i data-feather="edit-3"></i>
                                        </a>
                                    </span>
                                    <a href="#" class="btn btn-outline-light ml-2" data-toggle="tooltip"
                                       title="Delete Task">
                                        <i data-feather="trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="app-detail-article">
                            <div class="card-body">
                                <div class="d-flex align-items-center p-l-r-0 m-b-20">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-group">
                                            <div class="avatar avatar-sm" title="Polly Everist" data-toggle="tooltip">
                                                <span class="avatar-title bg-primary rounded-circle">P</span>
                                            </div>
                                            <div class="avatar avatar-sm" title="Godwin Adanez" data-toggle="tooltip">
                                                <span class="avatar-title bg-success rounded-circle">G</span>
                                            </div>
                                            <figure class="avatar avatar-sm" title="Lisle Essam" data-toggle="tooltip">
                                                <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle"
                                                     alt="image">
                                            </figure>
                                            <figure class="avatar avatar-sm" title="Baxie Roseblade" data-toggle="tooltip">
                                                <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle"
                                                     alt="image">
                                            </figure>
                                            <figure class="avatar avatar-sm" title="Mella Mixter" data-toggle="tooltip">
                                                <img src="assets/media/image/user/women_avatar1.jpg" class="rounded-circle"
                                                     alt="image">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="ml-auto">
                                        <span class="badge bg-warning badge-pill mr-2">Theme Support</span>
                                        <a href="#" data-toggle="tooltip" title="Files" class="mr-2">
                                            <i class="fa fa-paperclip"></i>
                                        </a>
                                        <a href="#" class="mr-2">
                                            <i class="fa fa-star font-size-16 text-warning"></i>
                                        </a>
                                        <span class="text-muted">4:14 AM</span>
                                    </div>
                                </div>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis
                                    incidunt labore modi numquam omnis pariatur possimus suscipit vitae voluptas?</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam asperiores
                                    error esse fugiat fugit laboriosam necessitatibus officia, placeat, quam quis
                                    reprehenderit similique soluta suscipit tempore! Consequuntur eligendi hic in libero
                                    nostrum rem ut? At itaque laboriosam natus provident reprehenderit.</p>
                            </div>
                            <hr class="m-0">
                            <div class="card-body">
                                <h6 class="mb-3 font-size-11 text-uppercase">Files</h6>
                                <ul class="list-unstyled mb-0">
                                    <li class="small">
                                        <a href="#">
                                            <i data-feather="paperclip" class="mr-1 width-15 height-15"></i>
                                            uikit-design.psd
                                        </a>
                                    </li>
                                    <li class="small">
                                        <a href="#">
                                            <i data-feather="paperclip" class="mr-1 width-15 height-15"></i>
                                            uikit-design.sketch
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <hr class="m-0">
                            <div class="card-body">
                                <h6 class="mb-3 font-size-11 text-uppercase">Comment</h6>
                                <div class="reply-email-quill-editor mb-3"></div>
                                <div class="d-flex justify-content-between">
                                    <div class="reply-email-quill-toolbar">
                                        <span class="ql-formats mr-0">
                                          <button class="ql-bold"></button>
                                          <button class="ql-italic"></button>
                                          <button class="ql-underline"></button>
                                          <button class="ql-link"></button>
                                          <button class="ql-image"></button>
                                        </span>
                                    </div>
                                    <button class="btn btn-primary">
                                        <i data-feather="send" class="mr-2"></i>
                                        Send
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer>
        <div class="container-fluid">
            <div>© 2019 Protable v1.0.0 Made by <a href="http://laborasyon.com">Laborasyon</a></div>
            <div>
                <nav class="nav">
                    <a href="https://themeforest.net/licenses/standard" class="nav-link">Licenses</a>
                    <a href="#" class="nav-link">Change Log</a>
                    <a href="#" class="nav-link">Get Help</a>
                </nav>
            </div>
        </div>
    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<div class="modal fade" id="newTaskModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Task</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <form autocomplete="off">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Task title</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Tags</label>
                        <div class="col-sm-9">
                            <select class="js-example-basic-single" multiple>
                                <option value="Theme Support">Theme Support</option>
                                <option value="Freelance">Freelance</option>
                                <option selected value="Social">Social</option>
                                <option selected value="Friends">Friends</option>
                                <option value="Coding">Coding</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row row-sm">
                        <label class="col-sm-3 col-form-label">Deadline</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control create-event-datepicker"
                                   placeholder="Date">
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control create-event-demo"
                                   placeholder="Time">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Participate</label>
                        <div class="col-sm-9">
                            <div class="avatar-group">
                                <figure class="avatar avatar-sm">
                                    <img src="assets/media/image/user/women_avatar3.jpg" class="rounded-circle" alt="image">
                                </figure>
                                <figure class="avatar avatar-sm">
                                    <span class="avatar-title bg-danger rounded-circle">S</span>
                                </figure>
                                <figure class="avatar avatar-sm">
                                    <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">
                                </figure>
                            </div>
                            <button type="button" class="btn btn-outline-light btn-sm btn-floating" title="Add User" data-toggle="dropdown">
                                <i class="ti-plus"></i>
                            </button>
                            <div class="dropdown-menu p-0">
                                <div class="p-3">
                                    <h6 class="text-uppercase font-size-11 mb-3">Add User</h6>
                                    <div class="input-group input-group-sm">
                                        <input type="text" class="form-control" placeholder="Search User" aria-describedby="button-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-light" type="button" id="button-addon2">
                                                <i class="ti-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <ul class="list-group list-group-flush mt-2">
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <span class="avatar-title bg-primary rounded-circle">V</span>
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <img src="assets/media/image/user/women_avatar3.jpg" class="rounded-circle" alt="image">
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle" alt="image">
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm ml-3" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <img src="assets/media/image/user/man_avatar2.jpg" class="rounded-circle" alt="image">
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm ml-3" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Description</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3"></label>
                        <div class="col-sm-9">
                            <button type="submit" class="btn btn-primary">Create</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editTaskModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Task</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <form autocomplete="off">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Task title</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Title" value="Draw design and presentation for customers.">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Tags</label>
                        <div class="col-sm-9">
                            <select class="js-example-basic-single" multiple>
                                <option selected value="Theme Support">Theme Support</option>
                                <option value="Freelance">Freelance</option>
                                <option value="Social">Social</option>
                                <option value="Friends">Friends</option>
                                <option value="Coding">Coding</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row row-sm">
                        <label class="col-sm-3 col-form-label">Deadline</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control create-event-datepicker"
                                   placeholder="Date" value="10/31/2019">
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control create-event-demo" value="11:57"
                                   placeholder="Time">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Participate</label>
                        <div class="col-sm-9">
                            <div class="avatar-group">
                                <figure class="avatar avatar-sm">
                                    <img src="assets/media/image/user/women_avatar3.jpg" class="rounded-circle" alt="image">
                                </figure>
                                <figure class="avatar avatar-sm">
                                    <span class="avatar-title bg-danger rounded-circle">S</span>
                                </figure>
                                <figure class="avatar avatar-sm">
                                    <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">
                                </figure>
                            </div>
                            <button type="button" class="btn btn-outline-light btn-sm btn-floating" title="Add User" data-toggle="dropdown">
                                <i class="ti-plus"></i>
                            </button>
                            <div class="dropdown-menu p-0">
                                <div class="p-3">
                                    <h6 class="text-uppercase font-size-11 mb-3">Add User</h6>
                                    <div class="input-group input-group-sm">
                                        <input type="text" class="form-control" placeholder="Search User" aria-describedby="button-addon3">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-light" type="button" id="button-addon3">
                                                <i class="ti-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <ul class="list-group list-group-flush mt-2">
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <span class="avatar-title bg-primary rounded-circle">V</span>
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <img src="assets/media/image/user/women_avatar3.jpg" class="rounded-circle" alt="image">
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <img src="assets/media/image/user/women_avatar2.jpg" class="rounded-circle" alt="image">
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm ml-3" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center pl-0 pr-0">
                                            <div class="mr-2">
                                                <figure class="avatar avatar-sm">
                                                    <img src="assets/media/image/user/man_avatar2.jpg" class="rounded-circle" alt="image">
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Valentine Maton</h6>
                                            </div>
                                            <div class="dropdown ml-auto">
                                                <a href="#" data-toggle="dropdown" class="btn btn-outline-light btn-sm ml-3" aria-haspopup="true" aria-expanded="false">
                                                    <i data-feather="plus"></i>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Description</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" rows="6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis incidunt labore modi numquam omnis pariatur possimus suscipit vitae voluptas?</textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3"></label>
                        <div class="col-sm-9">
                            <button type="submit" class="btn btn-success">
                                <i data-feather="check" class="mr-2"></i>
                                Save
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Plugin scripts -->
<script src="vendors/bundle.js"></script>

<!-- Tagsinput -->
<script src="vendors/tagsinput/bootstrap-tagsinput.js"></script>
<script src="assets/js/examples/tagsinput.js"></script>

<!-- quill -->
<script src="vendors/quill/quill.js"></script>

<!-- Clockpicker -->
<script src="vendors/clockpicker/bootstrap-clockpicker.min.js"></script>
<script src="assets/js/examples/clockpicker.js"></script>

<!-- Select2 -->
<script src="vendors/select2/js/select2.min.js"></script>
<script src="assets/js/examples/select2.js"></script>

<!-- Datepicker -->
<script src="vendors/datepicker/daterangepicker.js"></script>
<script src="assets/js/examples/datepicker.js"></script>

<!-- App scripts -->
<script src="assets/js/app.min.js"></script>

<script>
    new Quill('.reply-email-quill-editor', {
        modules: {
            toolbar: ".reply-email-quill-toolbar"
        },
        placeholder: "Type something... ",
        theme: "snow"
    });

    $(function () {
        $(document).on('click', '.app-block .app-content .app-action .action-left input[type="checkbox"]', function () {
            $('.app-lists ul li input[type="checkbox"]').prop('checked', $(this).prop('checked'));
            if ($(this).prop('checked')) {
                $('.app-lists ul li input[type="checkbox"]').closest('li').addClass('active');
            } else {
                $('.app-lists ul li input[type="checkbox"]').closest('li').removeClass('active');
            }
        });

        $(document).on('click', '.app-lists ul li input[type="checkbox"]', function () {
            if ($(this).prop('checked')) {
                $(this).closest('li').addClass('active');
            } else {
                $(this).closest('li').removeClass('active');
            }
        });

        $(document).on('click', '.app-block .app-content .app-content-body .app-lists ul.list-group li.list-group-item', function (e) {
            if (!$(e.target).is('.custom-control, .custom-control *, a, a *')) {
                $('.app-detail').addClass('show').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                    $('.app-block .app-content .app-content-body .app-detail .app-detail-article').niceScroll().resize();
                });
            }
        });

        $(document).on('click', 'a.app-detail-close-button', function () {
            $('.app-detail').removeClass('show');
            return false;
        });

        $(document).on('click', '.app-sidebar-menu-button', function () {
            $('.app-block .app-sidebar, .app-content-overlay').addClass('show');
            // $('.app-block .app-sidebar .app-sidebar-menu').niceScroll().resize();
            return false;
        });

        $(document).on('click', '.app-content-overlay', function () {
            $('.app-block .app-sidebar, .app-content-overlay').removeClass('show');
            return false;
        });

        $('.app-block .app-content .app-content-body .app-lists ul').sortable({
            axis: "y",
            cursor: "move",
            handle: '.app-sortable-handle'
        }).disableSelection();
    });
</script>

</body>
</html>